<template>
    <div>
        <ul class="CommunityList">
            <li @click="entryHome" v-for="item in list"
                :class="['CommunityItem', active == item.id ? 'CommunityItems' : 'CommunityItem']"
                @mouseover="entry(item.id)" @mouseleave="leave(item.id)">
                <div>
                    <div class="titles"></div>
                    <div>
                        <div class="content">
                            <div class="titleName" style="margin-bottom: 15px">
                                {{ item.name }}
                            </div>
                            <div style="color: #9d9d9d;font-size: 14px;">
                                {{ item.address }}
                            </div>
                        </div>
                        <div class="Btns">
                            <div style="color: #0498ff;border-right: 1px solid #f4f4f4;width: 33%;">管理</div>
                            <div style="color: #0498ff;border-right: 1px solid #f4f4f4;width: 33%;">编辑</div>
                            <div style="color: #f46464;width: 33%;" @click="delCommunity(item.id)">删除</div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="CommunityItem CommonityItemAdd">
                <div class="addCommunity"
                    style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;">
                    +<br>
                    新建小区
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { getCommunityList, deleteCommunity } from '@/api/CommunityAPI';
import { onMounted, ref } from "vue";
import type { Community } from '@/types/Community';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

let list = ref<Community[]>([])
const render = () => {
    getCommunityList().then(res => {
        list.value = res.data
        console.log(res.data)
    })
}
onMounted(() => {
    render()
})
const entryHome = () => {
    router.push('/home')
}
const active = ref(0)
const entry = (id: number) => {
    active.value = id
}
const leave = (id: number) => {
    active.value = 0
}
const delCommunity = (id: number) => {

    ElMessageBox.confirm(
        '删除后数据无法恢复，确认删除小区信息吗?',
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            deleteCommunity(id).then(res => {
                // console.log(res);
                render()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>

<style scoped>
@import '@/assets/Community/Community.css';
</style>